<template>
  <section class="batchConfig">
    <el-dialog
      id="configcar"
      v-dialogDrag
      title="导入仓位信息"
      :visible.sync="popupsVisible"
      width="50%"
      center
      :append-to-body="true"
      :lock-scroll="true"
      :before-close="handleClose"
    >
      <dialogHeader
        slot="title"
        :title="'导入仓位信息'"
        :style-type="$store.state.app.dialogType"
      />
      <el-row class="btns">
        <el-col :span="8" :offset="16">
          <el-upload
            ref="upload"
            class="upload-demo"
            action
            :http-request="handleChange"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <el-button
              type="primary"
              class="iconfont icon-importTemplate"
            >导入
            </el-button>
          </el-upload>
          <el-link
            :key="'importFile'"
            style="margin-left: 10px"
            class="linkFont"
            :underline="false"
            @click="templateDownload"
          >{{ "导入模板下载" }}</el-link>
          <!--            :href="template.URL"-->
          <!--            :download="template.name"-->
        </el-col>
      </el-row>
      <div
        slot="footer"
        class="dialog-footer"
      />
    </el-dialog>
  </section>
</template>

<script>
import api from './api'
import { getPosDataByStore } from '@/views/pa/branchWarehouseManagement/WarehouseSpaceMaintenance/fetchData'

export default {
  name: 'BatchConfigCar',
  components: {
    // lableName: () => import('@/components/lableName'), // 标题溢出样式组件
    dialogHeader: () => import('@/components/dialogHeader') // 弹窗标题,
  },
  props: {
    // 弹窗开关
    popupsVisible: { type: Boolean, default: false }
    // 传入的选中数据
    // multipleData: { type: Array, default: () => ([]) }
  },
  data() {
    return {
      template: {
        URL: '/fileTemplate/pa/仓库仓位维护模板.xlsx',
        name: '仓库仓位维护模板.xlsx'
      },
      loading: false,
      // 表格数据
      listData: [],
      // 表格数据
      tableCols: [
        {
          codeField: 'batchRes',
          label: '仓库编码'
        },
        {
          codeField: 'DMSOrderId',
          label: '仓库名称'
        },
        {
          codeField: 'orderStatus',
          label: '仓位编码'
        }
      ]
    }
  },
  watch: {
    'popupsVisible': {
      handler(val) {

      },
      immediate: true
    }
  },
  methods: {
    templateDownload() {
      const loading = this.$loading({ text: `正在下载模板,请稍等...` })
      this.$requestAPI({
        apiUrl: '/mp/e3sh/spareparts/nodestorehouse/dlrPartWarehouseMaintainService/downloadTemplate.do',
        variables: {
          dataType: 'excel'
        }
      }).then(res => {
        this.$utils.downloadFile(res, '备件仓库仓位导入模板.xlsx')
      }).catch(err => {
        if (err.response.data.msg) {
          this.$message(err.response.data.msg)
        } else {
          this.$message(err.message)
        }
      }).finally(() => {
        loading.close()
      })
    },
    handleClose() {
      this.$confirm('确认关闭窗口?', '提示')
        .then(() => {
          this.$emit('update:popups-visible', false)
        })
    },
    // 上传
    attachHandleChange(param) {
      const url = api.importDlrPartWareSpaceUsingPOST.APIUrl
      this.loading = true
      this.$requestUpload(url, param)
        .then((response) => {
          // this.uploadSuccess(response)
          if (response.result === '1') {
            this.$message('导入成功!')
            this.$emit('update:popups-visible', false)
            getPosDataByStore.call(this.$parent, this.$parent.leftCurRow)
          } else {
            this.$message(response.msg ? response.msg : '导入失败')
          }
        })
        .catch((err) => {
          // this.loading = false
          // this.listData = []
          // console.info(err)
        })
    },

    handleChange(fileparams) {
      this.attachHandleChange(fileparams)
    },
    // 下载模板
    // downLoadTemplate() {
    //   const loading = this.$loading({
    //     text: '正在下载Excel模板...',
    //     spinner: 'el-icon-loading',
    //     background: 'rgba(0, 0, 0, 0.4)'
    //   })
    //   this.$requestAPI({
    //     method: 'GET',
    //     variables: { dataType: 'excel' },
    //     apiUrl: api.downloadTemplate.APIUrl
    //   }).then(res => {
    //     this.$utils.downloadFile(res, '导入配车模板.xlsx')
    //     loading.close()
    //   })
    // },
    // 文件格式过滤
    beforeAvatarUpload(file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      if (!extension && !extension2) {
        this.$alert('导入文件只能为Excel文件', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
      }
      return extension || extension2
    },
    // 提交钮点击事件
    submit() {

    }

  }
}
</script>

<style scoped lang="scss">
  .btns {
    margin-bottom: 10px;
  }
  .el-table {
    margin: 5px 0;
  }
</style>
